<ui:composition xmlns="http://www.w3.org/1999/xhtml"
			    xmlns:ui="http://java.sun.com/jsf/facelets"
			    xmlns:h="http://java.sun.com/jsf/html"
			    xmlns:f="http://java.sun.com/jsf/core"
			    xmlns:rich="http://richfaces.org/rich"
			    xmlns:a4j="http://richfaces.org/a4j"
			    template="/WEB-INF/layout/template.xhtml">
	
	<ui:define name="title">
		<h:outputText value="#{i18n['dataTableAuflisten.title']}"/>
	</ui:define>

	<ui:define name="contents">
		<style type="text/css">
			.odd-row {
				background-color: #ECF3FE;
			}
			.even-row {
				background-color: #FCFFFE;
			}
			.active-row {
				background-color: #FFEBDA;
			}
		</style>
		
		<h:form id="findForm">
			<h:panelGrid columns="4">
				<h:outputLabel id="nachnameLabel"
				               value="#{i18n['find.nachname.prompt']}"
				               for="nachname"/>
				
				<a4j:region>
					<h:inputText id="nachname" value="#{kv.nachname}"
					             required="true"
					             requiredMessage="#{i18n['find.nachname.required']}"/>
				</a4j:region>
				
				<rich:suggestionbox id="nachnameSuggestion"
				                    for="nachname"
				                    minChar="2"
				                    frequency="1"
				                    suggestionAction="#{kv.findNachnamenByPrefix}"
				                    nothingLabel="#{i18n['find.nachname.nothing']}"
				                    var="kunde">
				    <h:column>
						<h:outputText value="#{kunde.nachname}"/>
					</h:column>
				</rich:suggestionbox>

				<a4j:commandButton id="findSubmit"
				                   action="#{kv.find}"
				                   value="#{i18n['find.submit']}"
				                   reRender="kundenTabelle, fehlermeldung"/>			
			</h:panelGrid>
			
			<rich:message id="fehlermeldung" for="nachname" errorClass="error" warnClass="warn"/>
		</h:form>

		<h:form rendered="#{not empty kv.gefundeneKunden}">
			<rich:dataTable id="kundenTabelle" value="#{kv.gefundeneKunden}"
			                var="kunde" binding="#{kv.tabelleDataTableAuflisten}"
			                rows="5"
			                cellspacing="10">
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.nr']}"/>
					</f:facet>
					<h:outputText value="#{kv.tabelleDataTableAuflisten.rowIndex+1}"/>
				</rich:column>
				<rich:column sortBy="#{kunde.id}">
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.kunde.id']}"/>
					</f:facet>
					<h:outputText value="#{kunde.id}"/>
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.kunde.nachname']}"/>
					</f:facet>
					<h:outputText value="#{kunde.nachname}"/>
				</rich:column>
				<rich:column sortBy="#{kunde.vorname}">
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.kunde.vorname']}"/>
					</f:facet>
					<h:outputText value="#{kunde.vorname}"/>
				</rich:column>
				<rich:column sortBy="#{kunde.kategorie}">
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.kunde.kategorie']}"/>
					</f:facet>
					<h:outputText value="#{kunde.kategorie}"/>
				</rich:column>
				<rich:column sortBy="#{kunde.umsatz}">
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.kunde.umsatz']}"/>
					</f:facet>
					<h:outputText value="#{kunde.umsatz}">
						<f:convertNumber type="currency" currencyCode="EUR"/>
					</h:outputText><br/>
					<h:outputLink value="http://www.exchangerate.com/quick_calculator.html?amount_from=#{kunde.umsatz}&#38;calc_short_from_iso=EUR&#38;calc_short_to_iso=USD&#38;Submit=Convert"
					              target="_blank">
						<h:outputText value="#{i18n['waehrung.umrechnen']}"/>
					</h:outputLink>
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.kunde.seit']}"/>
					</f:facet>
					<h:outputText value="#{kunde.seit}"/>
				</rich:column>
				<rich:column sortBy="#{kunde.art}">
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.kunde.art']}"/>
					</f:facet>
					<h:outputText value="#{kunde.art}"/>
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.kunde.rabatt']}"/>
					</f:facet>
					<h:outputText value="#{kunde.rabatt}" rendered="#{kunde.art eq 'F'}">
						<f:convertNumber type="percent" minFractionDigits="1" maxFractionDigits="2"/>
					</h:outputText>
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{i18n['tabelle.kunde.bild']}"/>
					</f:facet>
					<h:graphicImage id="bild"
					                url="#{initParam.hskaUploadDir}/#{kunde.dateiname}"
					                alt="#{i18n['dataTableAuflisten.kunde.bild.alt']}"
					                rendered="#{not empty kunde.dateiname}"/>
				</rich:column>
				
				<f:facet name="footer">
					<rich:datascroller maxPages="10"/>
				</f:facet>
			</rich:dataTable>
			
			<rich:jQuery selector="#kundenTabelle tr:odd" query="addClass('odd-row')" />
			<rich:jQuery selector="#kundenTabelle tr:even" query="addClass('even-row')" />
			<rich:jQuery selector="#kundenTabelle tr"
			             query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
			<rich:jQuery selector="#kundenTabelle tr"
			             query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
		</h:form>
	</ui:define>
</ui:composition>
